<template>
  <div class="contents">
    <el-form
      class="demo-form-inline"
      :inline="true"
      label-position="right"
      label-width="80px"
      :model="formInline"
    >
      <el-form-item label="发货日期:">
        <el-date-picker
          v-model="value"
          class="writeWidth"
          end-placeholder="结束日期"
          range-separator="-"
          start-placeholder="开始日期"
          type="daterange"
        />
      </el-form-item>
      <el-form-item label="搜索:">
        <el-input
          v-model="formInline.user"
          class="writeWidth"
          placeholder="名称/联系人/手机/订单号"
        />
      </el-form-item>
      <el-form-item :style="{ visibility: !openCol ? 'hidden' : 'visible' }">
        <el-button type="primary">查询</el-button>
        <el-dropdown style="margin-left: 10px;">
          <el-button>
            导出
            <i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>对账单详情</el-dropdown-item>
            <el-dropdown-item>按集团导出</el-dropdown-item>
            <el-dropdown-item>对账明细导出</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-form-item>
      <el-form-item>
        <el-button style="margin-left: 85px;" type="text" @click="clickOpen">
          <span :style="{ visibility: openCol ? 'hidden' : 'visible' }">
            收起
          </span>
          高级筛选
          <vab-icon :icon="openCol ? 'arrow-down-s-line' : 'arrow-up-s-line'" />
        </el-button>
      </el-form-item>
      <div v-show="!openCol">
        <el-form-item label="结算日期:">
          <el-date-picker
            v-model="value"
            class="writeWidth"
            end-placeholder="结束日期"
            range-separator="-"
            start-placeholder="开始日期"
            type="daterange"
          />
        </el-form-item>
        <el-form-item label="支付日期:">
          <el-date-picker
            v-model="value"
            class="writeWidth"
            end-placeholder="结束日期"
            range-separator="-"
            start-placeholder="开始日期"
            type="daterange"
          />
        </el-form-item>
        <el-form-item label="核算状态:">
          <el-select v-model="value" class="writeWidth" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="发货状态:">
          <el-select v-model="value" class="writeWidth" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="退货状态:">
          <el-select v-model="value" class="writeWidth" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="锁定状态:">
          <el-select v-model="value" class="writeWidth" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="线路:">
          <el-select v-model="value" class="writeWidth" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="仓库:">
          <el-select v-model="value" class="writeWidth" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="集团:">
          <el-select v-model="value" class="writeWidth" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="司机:">
          <el-select v-model="value" class="writeWidth" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="业务员:">
          <el-select v-model="value" class="writeWidth" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="客户类型:">
          <el-select v-model="value" class="writeWidth" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="流水号:">
          <el-input
            v-model="formInline.user"
            class="writeWidth"
            placeholder="第三方流水号"
          />
        </el-form-item>
        <el-form-item label="退货单号:">
          <el-input
            v-model="formInline.user"
            class="writeWidth"
            placeholder="退货单号"
          />
        </el-form-item>
        <el-form-item label="对账状态:">
          <el-select v-model="value" class="writeWidth" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="回单状态:">
          <el-select v-model="value" class="writeWidth" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <br />
        <el-form-item label="付款方式:">
          <el-checkbox>货到付款</el-checkbox>
          <el-checkbox>微信支付</el-checkbox>
          <el-checkbox>余额支付</el-checkbox>
          <el-checkbox>支付宝支付</el-checkbox>
          <el-checkbox>组合支付</el-checkbox>
        </el-form-item>
        <br />
        <el-form-item label="订单标签:" />
        <br />
        <el-form-item style="margin-left: 80px;">
          <el-button type="primary">查询</el-button>
          <el-button>重置</el-button>
          <el-dropdown style="margin-left: 10px;">
            <el-button>
              导出
              <i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>对账单详情</el-dropdown-item>
              <el-dropdown-item>按集团导出</el-dropdown-item>
              <el-dropdown-item>对账明细导出</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-form-item>
      </div>
    </el-form>
    <div style="padding-bottom: 16px;">
      <el-button plain>收起退货单</el-button>
    </div>

    <el-table :data="table1" style="width: 100%;">
      <el-table-column fixed type="expand">
        <template slot="header" slot-scope>
          <i class="el-icon-s-operation"></i>
        </template>
        <template slot-scope>
          <el-table :data="table2" style="width: 100%;">
            <el-table-column label="日期" prop="date" width="180" />
            <el-table-column label="姓名" prop="name" width="180" />
            <el-table-column label="地址" prop="address" />
          </el-table>
        </template>
      </el-table-column>
      <el-table-column
        fixed
        type="selection"
        width="55"
        align="center"
      ></el-table-column>
      <el-table-column fixed label="业务单号" prop="date" width="150" />
      <el-table-column label="仓库" prop="name" width="120" />
      <el-table-column label="客户名称" prop="province" width="120" />
      <el-table-column label="手机号" prop="city" width="120" />
      <el-table-column label="集团名称" prop="address" />
      <el-table-column label="单据类型" prop="zip" width="120" />
      <el-table-column label="应收金额" prop="name" />
      <el-table-column label="已收金额" prop="name" />
      <el-table-column label="实收金额" prop="name" />
      <el-table-column label="抹零金额" prop="name" />
      <el-table-column label="未收金额" prop="name" />
      <el-table-column sortable label="发货日期" prop="name" width="100px" />
      <el-table-column sortable label="结算日期" prop="name" width="100px" />
      <el-table-column label="线路名称" prop="name" />
      <el-table-column label="司机" prop="name" />
      <el-table-column label="业务员" prop="name" />
      <el-table-column label="对账单号" prop="name" />
      <el-table-column label="对账状态" prop="name" />
      <el-table-column label="对账人" prop="name" />
      <el-table-column label="结算状态" prop="name" />
      <el-table-column label="回单状态" prop="name" />
      <el-table-column label="备注" prop="name" />
      <el-table-column fixed="right" label="操作" width="200">
        <template slot-scope="scope">
          <el-button size="small" type="text" @click="handleClick(scope.row)">
            详情
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="bottom-desc">
      <el-pagination
        background
        :current-page="currentPage4"
        layout="total, prev, pager, next,sizes"
        :page-size="125"
        :page-sizes="[25, 50, 100, 200]"
        :total="0"
      />
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        openCol: true,
        formInline: {
          user: '',
          region: '',
        },
        value: [],
        options: [
          {
            value: '选项1',
            label: '黄金糕',
          },
          {
            value: '选项2',
            label: '双皮奶',
          },
        ],
        table1: [
          {
            date: '2016-05-02',
            name: '王小虎',
            province: '上海',
            city: '普陀区',
            address: '1518',
            zip: 200333,
          },
          {
            date: '2016-05-04',
            name: '王小虎',
            province: '上海',
            city: '普陀区',
            address: '1517',
            zip: 200333,
          },
          {
            date: '2016-05-01',
            name: '王小虎',
            province: '上海',
            city: '普陀区',
            address: '1519',
            zip: 200333,
          },
          {
            date: '2016-05-03',
            name: '王小虎',
            province: '上海',
            city: '普陀区',
            address: '1516',
            zip: 200333,
          },
        ],
        table2: [],
      }
    },
    methods: {
      clickOpen() {
        this.openCol = !this.openCol
      },
    },
  }
</script>

<style lang="scss" scoped>
  .contents {
    padding: 10px 20px;

    .writeWidth {
      width: 233px;
    }

    .el-dropdown-link {
      cursor: pointer;
      color: #409eff;
    }
    .el-icon-arrow-down {
      font-size: 12px;
    }

    .bottom-desc {
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }
  }
</style>
